import { computed, CSSProperties, ref } from 'vue'
import hDrawerConfig from '@/components/common/drawer/config'
import useDialogStore from '@/store/modules/dialog'

const useStyle = () => {
  const hDrawerWidthUnit = ref<'%' | 'px'>('%')
  const dialogStore = useDialogStore()

  const hDrawerMaskStyle = computed<CSSProperties>(() => {
    return {
      zIndex: dialogStore.getZIndex,
    }
  })

  const hDrawerContainerStyle = ref<CSSProperties>({
    width: `${hDrawerConfig.hDrawerDefaultWidth}${hDrawerWidthUnit.value}`,
  })

  const hDrawerBodyStyle = ref<CSSProperties>({})

  const hDrawerLoadingStyle = computed<CSSProperties>(() => {
    let zIndex = dialogStore.getZIndex
    return {
      zIndex: ++zIndex,
    }
  })

  return {
    hDrawerWidthUnit,
    hDrawerMaskStyle,
    hDrawerBodyStyle,
    hDrawerLoadingStyle,
    hDrawerContainerStyle,
  }
}

export default useStyle
